{% extends 'base.html' %}
{% load static %}
{% block main %}
    <div style="text-align: center">
        <form action="{% url 'goods:pays' %}" method="post">
            {% csrf_token %}
            <table style="width: 80%;margin: 0 auto; table-layout: fixed;">
                {# 列距#}
                <colgroup>
                    <col width="60px">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                    <col width="auto">
                </colgroup>
                <tr>
                    {# 全选框#}
                    <td style="width: 30px"><input id="allcheck" type="checkbox" value=""/>全选
                    </td>
                    <td>商品</td>
                    <td>说明</td>
                    <td>单价</td>
                    <td>数量</td>
                    <td>小计</td>
                    <td>操作</td>
                </tr>
                {% for cart,good in sumlist %}
                    <tr class="showul">
                        <td style="width: 30px"><input class="check-one" name="onecheck" id="gchackbox{{ cart.id }}"
                                                       type="checkbox" value="{{ cart.id }}"
                                                       onclick="danxuan({{ cart.id }})"/></td>
                        <td><img src="{{ MEDIA_URL }}/{{ good.image }}" style="height: 100px;width: 100px"></td>
                        <td>{{ good.caption }}</td>
                        <td>{{ good.price }}</td>
                        <td>
                            {# 可改可不改#}
                            <p>
                                <span onclick="cutnum({{ cart.id }})" style="cursor: pointer;">-</span>
                                <input value="{{ cart.num }}" disabled="disabled" style="width: 15px"
                                       id="quantity{{ cart.id }}">
                                <span onclick="addnum({{ cart.id }})" style="cursor: pointer;">+</span></p>
                        </td>
                        {# 某一条记录的总价#}
                        <td class="Quantity-input" id="xiaoji">{% widthratio good.price 1 cart.num %}
                        </td>
                        <td><a href="{% url 'goods:delt' cart.id %}" style="">刪除</a></td>
                    </tr>
                    {{ break }}
                {% endfor %}
            </table>
            <div>
                <p>应付：<span class="pieces-total"> </span></p>
                {# 视图函数支付订单，要获取总额 #}
                <input type="text" name="total" id='zancun' value="" style="display: none"/>
                <input type="submit" id="settlement" value="结算"
                       style="width: 60px;height: 40px;background:lightcoral;border-radius: 10px;border-width: inherit">
            </div>
        </form>
    </div>
{% endblock %}
{% block script %}
    <script type="text/javascript">
        {#实现购物车中商品数量+1、-1操作，但是并未更细数据库#}

        function addnum(id) {
            var a = document.getElementById("quantity" + id).value
            document.getElementById("quantity" + id).value = parseInt(a) +
                1
        }

        function cutnum(id) {
            var a = document.getElementById("quantity" + id).value
            if (parseInt(a) > 1) {
                document.getElementById("quantity" + id).value =
                    parseInt(a) - 1
            } else {
                window.alert("数量最少为1")
            }
        }

        {#全选、反选#}
        {# 全选框#}
        var all = document.getElementById("allcheck")
        {#获取页面购物车记录的列表#}
        var arr = document.getElementsByClassName("showul");
        var piecesTotal = document.getElementsByClassName('pieces-total')
            [0];//总价
        console.log(document.getElementsByClassName('pieces-total'))
        console.log(all)
        all.onclick = function () {
            if (document.getElementById("allcheck").checked == true) {
                for (var i = 0; i < arr.length; i++) {
                    arr[i].getElementsByClassName("check-one")[0].checked =
                        true;
                }
            } else {
                for (var i = 0; i < arr.length; i++) {
                    arr[i].getElementsByClassName("check-one")[0].checked =
                        false;
                }
            }
            getTotal()
        }
        {#选择其中一个商品#}
        var clicknum = 0

        function danxuan(id) {
            var checkedid = "gchackbox" + id
            if (clicknum == 0) {
                document.getElementById(checkedid).checked = true
                clicknum = clicknum + 1
            } else if (clicknum > 0) {
                document.getElementById(checkedid).checked = false
                clicknum = clicknum - 1
            }
            getTotal()
        }

        //计算
        function getTotal() {
            var price = 0;
            for (var i = 0; i < arr.length; i++) {
                if (arr[i].getElementsByTagName('input')[0].checked) {
                    price +=
                        parseFloat(arr[i].getElementsByClassName('Quantity-input')[0].innerHTML);
                }
            }
            piecesTotal.innerHTML = '￥' + price.toFixed(2);
            document.getElementById("zancun").value = '￥' +
                price.toFixed(2);
        }
    </script>
{% endblock %}